<template>
  <div class="app-container">
    <ul class="levelOneList">
      <li
        v-for="register in registers"
        :key="register.id">
        <p>
          <span style="margin: auto">
            <router-link :to="'/job/detail/'+register.jobId">
              {{ get_job_name(register.jobId) }}
            </router-link>
          </span>
          <el-steps :active="register.status" align-center>
            <el-step :status="get_status(0, register.status, register.result)" title="简历测评"/>
            <el-step :status="get_status(1, register.status, register.result)" title="笔试测评"/>
            <el-step :status="get_status(2, register.status, register.result)" title="面试测评"/>
            <el-step :status="get_status(3, register.status, register.result)" title="offer"/>
          </el-steps>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import register from '@/api/hr/register'
import job from '@/api/hr/job'

export default {
  data() {
    return {
      registers: {},
      jobs: {}
    }
  },
  created() {
    this.get_registers()
  },
  methods: {
    get_registers() {
      register.get_registerByUserId().then(response => {
        this.registers = response.data.registers
      })
      job.get_jobs().then(response => {
        this.jobs = response.data.jobs
      })
    },
    get_status(step, status, result) {
      // eslint-disable-next-line eqeqeq
      if (result == 1) {
        return 'success'
      }
      if (step < status) {
        return 'success'
      }
      // eslint-disable-next-line eqeqeq
      if (step == status && result == 0) {
        return 'finish'
      }
      // eslint-disable-next-line eqeqeq
      if (step == status && result == 2) {
        return 'error'
      }
      if (step > status) {
        return 'process'
      }
    },
    get_job_name(jobId) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].id === jobId) {
          return this.jobs[i].jobName
        }
      }
    }
  }
}
</script>

<style scoped>
.levelOneList{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.levelOneList li{
  position: relative;
}
.levelOneList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 150px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.levelOneList .acts {
  float: right;
  font-size: 14px;
}
.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #DDD;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 200px;
  display: block;
}
</style>
